<template>
	<view class="containter">
		<view class="warpper-item" @click="toDetail(item)" v-for="(item, index) in dataList" :key="index">
      <view class="signAt" v-if="userInfo.is_seller == 1" :class="item.order_record.type>2?'signAtActive':''">{{signInfo[item.order_record.type]}}</view>
			<view class="ht">
				<view class="ht-fl">
					<text class="name">{{item.connect_name}}</text>
					<text class="phone">{{item.connect_information}}</text>
					<image class="copy-icon" @click.stop="copyText(item.connect_information)" src="../../static/images/copy.png" mode=""></image>
				</view>
				<view class="ht-fr" :class="item.is_follow==0?'active':''">
					{{item.is_follow==1?'已接单':'待接单'}}
				</view>
			</view>
			<view class="hb">
				<view class="hb-item">
					<view class="hb-item-fl">
						客户姓名：{{item.connect_name}}
					</view>
					<view class="hb-item-fr">
						派单时间：{{item.created_at}}
					</view>
				</view>
				<view class="hb-item">
					<view class="hb-item-fl">
						联系类型：{{connectType[item.connect_type]}}
					</view>
					<view class="hb-item-fr">
						联系方式：{{item.connect_information}}
					</view>
				</view>
				<view class="hb-item">
					<view class="hb-item-fl">
						派单人：{{item.dispatch_username}}
					</view>
					<view class="hb-item-fr">
						接单人：{{item.receive_username?item.receive_username:"无"}}
					</view>
				</view>
				<view class="hb-item" v-if="item.is_follow == 1">
					<view class="hb-item-fl">
						客户等级：{{item.customer_level?item.customer_level:'暂无'}}
					</view>
					<view class="hb-item-fr">
						项目类型：{{item.item_type?item.item_type:'暂无'}}
					</view>
				</view>
				<view class="hb-item" v-if="item.is_follow == 1">
					<view class="hb-item-fl">
						接单时间：{{item.receive_at}}
					</view>
					<view class="hb-item-fr">
						跟进时间：{{item.last_follow_at?item.last_follow_at:'暂无'}}
					</view>
				</view>
				<view class="hb-item" v-if="item.is_follow == 1" style="margin-bottom: 0;">
          <view class="hb-item-fl">
          	跟进内容：{{item.last_follow_content?item.last_follow_content:'暂无'}}
          </view>
				</view>
			</view>
			<view class="btns flex flex-center">
				<view class="btn-item" @click.stop="jiedan(item.id)" v-if="item.is_follow == 0 && userInfo.is_seller == 1">
					立即接单
				</view>
			</view>
		</view>
      
	</view>
</template>

<script>
  import reqApi from "../../api/api.js";
	export default {
		props: {
			dataList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
        userInfo: {},
        oId: "",
        connectType: {
          1: "电话",
          2: "微信",
          3: "QQ",
          4: "其他"
        },
        signInfo: {
          1: "新派",
          2: "领取",
          3: "流派",
          4: "转派"
        }
			}
		},
    created() {
      this.userInfo = uni.getStorageSync('userInfo');
      console.log("用户信息", this.userInfo);
    },
		methods: {
      // 接单父组件处理,因为弹窗遮罩层问题,子组件里面处理不了
      jiedan(id) {
        this.$emit("acceptOrder", id);
      },
			toDetail(item) {
				// 运营
				if (this.userInfo.is_operation == 1) {
					uni.navigateTo({
						url: `/pages/order/orderDetail?id=${item.id}`
					})
				}
				// 商务
				if (this.userInfo.is_seller == 1) {
					uni.navigateTo({
						url: `/pages/order/takeOrderDetail?id=${item.id}`
					})
				}

			},
			copyText(text) {
			  uni.setClipboardData({
			    data: text,
			    success: function() {
			      uni.showToast({
			        title: "复制成功",
			        icon: 'none',
			        mask: true,
			        duration: 1500,
			      })
			    }
			  });
			},
		}
	}
</script>

<style lang="scss" scoped>
	.active{
		color: #E71014 !important;
	}
  .signAtActive{
    background: #FF9500 !important;
  }
  .signAt{
    position: absolute;
    top: 0;
    left: 0;
    width: 96rpx;
    height: 40rpx;
    background: #1071E7;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #FFFFFF;
    text-align: center;
    line-height: 40rpx;
    border-radius: 20rpx 0 20rpx 0;
  }
	.containter {
		.warpper-item {
			padding: 0 30rpx 30rpx 30rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
      margin-bottom: 30rpx;
      position: relative;
			.ht {
				height: 110rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rpx solid #eee;
				.ht-fl {
					display: flex;
					align-items: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;

					.name {}

					.phone {
						margin: 0 12rpx;
					}

					.copy-icon {
						width: 28rpx;
						height: 28rpx;
					}
				}

				.ht-fr {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #1071E7;
				}
			}

			.hb {
				padding: 20rpx 0;
				box-sizing: border-box;

				.hb-item {
					display: flex;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					margin-bottom: 20rpx;

					.hb-item-fl {
						flex: 1;
					}

					.hb-item-fr {
						flex: 1;
					}
				}
			}

			.btns {
				margin-top: 20rpx;
				.btn-item {
					width: 516rpx;
					height: 72rpx;
					background: linear-gradient(to top, #0992F5 0%, #1071E7 100%);
					border-radius: 68rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 72rpx;
				}
			}
		}
	}
</style>
